---
image: /generated/articles-docs-transitions-audio-transitions.png
crumb: '@remotion/transitions'
sidebar_label: 'Audio transitions'
title: 'Transitioning with audio'
---

_working from v4.0.58_

To add sound to a transition, you may use this function to wrap any [presentation](/docs/transitions/presentations/):

```tsx twoslash title="add-sound.tsx"
import {TransitionPresentation, TransitionPresentationComponentProps} from '@remotion/transitions';
import {Html5Audio} from 'remotion';

export function addSound<T extends Record<string, unknown>>(transition: TransitionPresentation<T>, src: string): TransitionPresentation<T> {
  const {component: Component, ...other} = transition;

  const C = Component as React.FC<TransitionPresentationComponentProps<T>>;

  const NewComponent: React.FC<TransitionPresentationComponentProps<T>> = (p) => {
    return (
      <>
        {p.presentationDirection === 'entering' ? <Html5Audio src={src} /> : null}
        <C {...p} />
      </>
    );
  };

  return {
    component: NewComponent,
    ...other,
  };
}
```

Customize the volume, offset, playback rate, and other properties of the [`<Html5Audio>`](/docs/html5-audio) component as you wish.

You may use it like this:

```tsx twoslash title="example.tsx"
import {TransitionPresentation, TransitionPresentationComponentProps} from '@remotion/transitions';
import {Html5Audio} from 'remotion';

export function addSound<T extends Record<string, unknown>>(transition: TransitionPresentation<T>, src: string): TransitionPresentation<T> {
  const {component: Component, ...other} = transition;

  const C = Component as React.FC<TransitionPresentationComponentProps<T>>;

  const NewComponent: React.FC<TransitionPresentationComponentProps<T>> = (p) => {
    return (
      <>
        {p.presentationDirection === 'entering' ? <Html5Audio src={src} /> : null}
        <C {...p} />
      </>
    );
  };

  return {
    component: NewComponent,
    ...other,
  };
}

// ---cut---

import {slide} from '@remotion/transitions/slide';
import {staticFile} from 'remotion';

const presentation = slide();
const withSound = addSound(presentation, staticFile('whoosh.mp3'));
```

Now you can use `withSound` in place of `presentation`.

## See also

- [`<Html5Audio>`](/docs/html5-audio)
- [Using audio](/docs/using-audio)
